import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, CustomChart } from 'echarts/charts';
import { TitleComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { setDomFontSize } from './lib/resetDom';

// ElementPlus中文配置
import ElementPlus from 'element-plus';
import locale from 'element-plus/dist/locale/zh-cn.mjs';

// 补间动画
import tween from './utils/tween';
import './styles/index.less';
setDomFontSize();
use([CanvasRenderer, LineChart, BarChart, CustomChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);

const app = createApp(App);

app.use(ElementPlus, { locale });
app.use(router);
app.use(tween);
app.mount('#app');

// 自定义指令highlight --- 暂时不需要了
// 用法
// <div v-highlight="highlight">{{ scope.$index + 1 }}</div>
// const highlight = value => {
//    value 选中项
// };
// app.directive('highlight', {
//   mounted(el, binding) {
//     const { value } = binding;
//     //设置鼠标悬浮样式和不可选
//     el.style.cursor = 'pointer';
//     el.style.userSelect = 'none';
//     const highlightHandler = (event) => {
//       // 获取当前行的值
//       const num = event.target.firstChild?.nodeValue;

//       if (num && num !== 'v-if') {
//         const parent = event.target.parentElement.parentElement;
//         // 获取当前所有需要清楚背景色的元素对象
//         const arrDom = parent.parentElement.parentElement.querySelectorAll('tr');
//         // 清除其他行背景色
//         arrDom.forEach(item => {
//           item.firstChild.style.backgroundColor = '#fff';
//         });
//         // 设置当前行背景色
//         parent.style.backgroundColor = '#EBF5FF';
//         // 调用指令传入的方法
//         value(num * 1);
//       }
//     };
//     // 添加点击事件监听器
//     el.addEventListener('click', highlightHandler);
//   },

//   unmounted(el) {
//     try {
//       // 使用实际绑定的事件处理函数进行移除
//       el.removeEventListener('click', highlightHandler);
//     } catch (e) {

//     }
//   },
// });
